<template>
	<view class="pd15">
		<view class="uni-status-bar"></view>
		<view class="flexSpace" style="padding:28rpx 0">
			<view class="tab">
				<view class="label" :class="current == 0?'active':''" @click="onTab(0)">
					{{$t('register.email')}}
				</view>
			</view>
			<view>
				<image src="@/static/contract/close.png" mode="" class="back" @click="back"></image>
			</view>
		</view>
		<view class="form-wrap">
			<view class="form-item" v-if="current == 0">
				<input type="text" v-model="form.username" :placeholder="`${$t('register.emailPlace')}`">
			</view>
			<view class="form-item phone" v-if="current == 1">
				<view class="code" @tap="pull">
					<text>{{phonetittle}}</text>
					<image src="../../static/pull.png" mode=""></image>
				</view>
				<input type="number" v-model="form.mobile" :placeholder="`${$t('register.mobilePlace')}`">
				<view class="international" v-if="show">
					<view v-for="(item,index) in listitem" :key="index">
						<view class="" @click="phone(item)">
							<text style="padding:0;padding-left:10rpx;">{{item.code}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item flexSpace">
				<input type="text" v-model="form.smsverify" :placeholder="`${$t('inputCode')}`">
				<view class="code" v-if="again == true" @click="getVerification">
					{{codeShow ? $t('register.recode') : time+'S'}}
				</view>
				<view class="code" v-else @click="getVerification">{{codeShow ? $t('getCode') : time+'S'}}</view>
			</view>
			<view class="form-item flexSpace">
				<input type="text" v-model="form.ref" :placeholder="`${$t('register.ref')}`" style="width:200rpx;">
				<view class="text">{{$t('register.refTips')}}</view>
			</view>
		</view>
		<view class="title">{{$t('register.setPass')}}</view>
		<view class="form-wrap" style="padding-top: 0;">
			<view class="form-item">
				<input type="password" :placeholder="`${$t('login.passwordPlace')}`" v-model="form.password">
			</view>
			<view class="form-item">
				<input type="password" :placeholder="`${$t('register.surePass')}`" v-model="form.password_confirmation">
			</view>
		</view>
		<view class="buttonBg" style="margin-top:60rpx;" @click="onAuthRegister">
			{{$t('register')}}
		</view>
		<view style="height:50rpx;"></view>
		<view class="flexSpace">
			<view></view>
			<view class="agreement">
				<text class="agreement-label">{{$t('register.agree')}}</text>
				<text class="agreement-value" @click="onNavigateToxy">《{{$t('register.agreeBook')}}》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import indexList from '@/assets/js/country'
	import base64Code from '@/plugin/base64code.js';
	import {
		authCode,
		authRegister,
		authLogin
	} from '@/api/auth'
	export default {
		data() {
			return {
				current: 0,
				listitem: indexList.list,
				show: false,
				phonetittle: indexList.list[0].code,
				form: {
					username: '',
					// mobile: '',
					smsverify: '',
					ref: '',
					password: '',
					password_confirmation: '',
					time: ''
				},
				again: false,
				codeShow: true,
				time: 60,
				isType: '',
				forbid: true,
				Locale: "",
			}
		},
		methods: {
			onNavigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			onNavigateToxy() {
				uni.navigateTo({
					url: '/pages/agreement/index'
				});
			},
			onTab(index) {
				if (this.current != index) {
					this.current = index
				}
			},
			pull() {
				this.show = this.show == false ? true : false
			},
			phone(item) {
				this.show = false
				this.phonetittle = item.code
			},
			getVerification() {
				if (!/^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/.test(this.form.username)) {
					uni.showModal({
						title: this.$t('info.reminder'), //温馨提示
						content: this.$t('pass.emailTips'), //请正确填写邮箱！
						showCancel: false
					});
					return;
				} else {
					if (this.forbid) {
						var time = Math.round(new Date().getTime() / 1000);
						var data = {
							username: base64Code.adds(time, this.form.username),
							time: time
						}
						authCode(data).then((res) => {
							this.forbid = false;
							uni.showLoading({
								title: this.$t('info.sending'), //发送中
							});
							this.codeShow = false;
							uni.hideLoading();
							let dateTime = setInterval(() => {
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.time = 60;
									this.forbid = true;
									this.again = true;
									this.codeShow = true;
									clearInterval(dateTime)
								}
							}, 1000)
						}).catch(() => {
							uni.hideLoading();
							this.forbid = true;
							this.codeShow = true;
						});
					} else {
						uni.showModal({
							title: this.$t('info.reminder'),
							content: this.$t('info.noRepeat'),
							showCancel: false
						});
					}
				}
			},
			back() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			onAuthRegister() {
				if (this.form.smsverify == '') {
					uni.showModal({
						content: this.$t('inputCode'), 
						showCancel: false
					});
					return;
				}
				if (this.form.ref == '') {
					uni.showModal({
						content: this.$t('password.ref'),
						showCancel: false
					});
					return;
				}
				if (this.form.password == '') {
					uni.showModal({
						content: this.$t('login.passwordPlace'), 
						showCancel: false
					});
					return;
				}
				if (this.form.password_confirmation == '') {
					uni.showModal({
						content: this.$t('register.surePass'),
						showCancel: false
					});
					return;
				}
				uni.showLoading();
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					username: base64Code.adds(time, this.form.username),
					smsverify: base64Code.adds(time, this.form.smsverify),
					ref: base64Code.adds(time, this.form.ref),
					password: base64Code.adds(time, this.form.password),
					password_confirmation: base64Code.adds(time, this.form.password_confirmation),
					time: time
				}
				authRegister(data).then((res) => {
					uni.hideLoading();
					uni.setStorageSync('usersOnline', true);
					if (res.code == 1000) {
						var redata = {
							username: data.username,
							password: data.password,
							time: data.time
						}
						var that = this
						uni.showModal({
							content: this.$t('register.success'),
							showCancel: false,
							success(res) {
								if (res.confirm) {
									that.login(redata)
								}
							}
						});
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			login(data) {
				authLogin(data).then((res) => {
					uni.hideLoading();
					if (res.code == 1000) {
						uni.setStorageSync('usersOnline', true);
						uni.setStorageSync('authorizationToken', res.data);
						this.$store.dispatch('getUserProfileAction');
						let userAccount = {
							username: this.form.username,
							password: this.form.password,
						};
						uni.setStorageSync('userAccount', JSON.stringify(userAccount));
						uni.switchTab({
							url: '/pages/home/index'
						});
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		.label {
			display: inline-block;
			margin-right: 32rpx;
			font-size: 28rpx;
			color: $hb-text-gray-color;

			&.active {
				font-size: 36rpx;
				color: $hb-text-black-color;
			}
		}
	}

	.back {
		width: 44rpx;
		height: 44rpx;
	}

	.title {
		font-size: 28rpx;
		color: $hb-text-black-color;
	}

	.form-wrap {
		padding: 32rpx;

		.form-item {
			padding: 30rpx 0 28rpx;
			border-bottom: .5px solid $hb-border-color;
			font-size: 30rpx;
			color: rgba(38, 38, 40, .5);
			align-items: center;

			input {
				font-size: 30rpx;
			}

			.code {
				color: $hb-primary-color;
			}

			.text {
				font-size: 24rpx;
				color: rgba(97, 99, 111, .5);
			}
		}
	}

	.phone {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;

		.code {
			display: flex;
			align-items: center;
			margin-right: 40rpx;

			text {
				color: $hb-text-black-color;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.international {
		position: absolute;
		background: #fff;
		left: 0;
		top: 100rpx;
		z-index: 9;
		width: 100%;
		height: 600rpx;
		overflow: scroll;
		font-size: 35rpx;
		line-height: 60rpx;
		margin-top: 20rpx;
		border: .5px solid #808080;
		border-radius: 10rpx;
	}

	.input-phone {
		border: .5px solid #808080;
		border-radius: 10rpx;
		display: flex;
	}

	.agreement {
		font-size: 24rpx;
		color: #57586E;

		.agreement-value {
			color: #E3892A;
		}
	}
</style>
